<script setup name="meun">
import {
  IconApps,
  IconTool,
  IconSwap,
  IconPaste
} from '@arco-design/web-vue/es/icon'
import router from '../router/index'
import { ref, watch, computed, onMounted } from 'vue'
import { useMenuStore } from '../store/index'

const clickMenu = (key) => {
  router.push({
    path: `/${key}`
  })
}

// 菜单是否收缩
const menuStore = useMenuStore()
// 注册窗口变化的监听
window.addEventListener('resize', () => {
  windowSizeChange()
})

const currentPath = ref([])

// 展开当前路由的标签
onMounted(() => {
  windowSizeChange()
  menuChange()
})
// 菜单（路由）改变
const menuChange = () => {
  const pathMatched = router.currentRoute.value.matched
  currentPath.value = []
  pathMatched.map((e) => {
    if (e.path !== '/') {
      currentPath.value.push(e.path.substring(1))
    }
  })
  if (currentPath.value.length === 0) {
    currentPath.value.push('dashboard')
  }
}

// window高度
const windowHeight = ref(window.innerHeight)
const windowSizeChange = () => {
  windowHeight.value = window.innerHeight
  if (window.innerWidth < 800) {
    menuStore.setCollapse(true)
  } else {
    if (menuStore.collapse) {
      menuStore.setCollapse(false)
    }
  }
}
// 菜单是否折叠
const menuCollapse = computed(() => {
  return menuStore.collapse
})
// 菜单高度
const menuHeight = computed(() => {
  return windowHeight.value - 75 + 'px'
})

watch(
  () => router,
  () => {
    // 菜单改变
    menuChange()
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div>
    <div class="project-desc">
      <div v-if="!menuCollapse">SrUrl</div>
      <div v-else>BB</div>
    </div>
    <a-menu
      class="menu"
      :default-open-keys="currentPath"
      :default-selected-keys="currentPath"
      :selected-keys="currentPath"
      :show-collapse-button="false"
      :auto-open-selected="true"
      :collapsed="menuCollapse || false"
      @menu-item-click="clickMenu"
      :collapsed-width="50"
    >
      <a-menu-item key="dashboard">
        <template #icon><icon-apps /></template>
        控制台
      </a-menu-item>
      <a-sub-menu key="short-url">
        <template #icon><icon-tool /></template>
        <template #title>短链接</template>
        <a-menu-item key="url-record">
          <template #icon><icon-swap /></template>
          短链接列表
        </a-menu-item>
        <a-menu-item key="visit-record">
          <template #icon><icon-paste /></template>
          访问记录
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="system">
        <template #icon><icon-tool /></template>
        <template #title>系统配置</template>
        <a-menu-item key="domain-blacklist">
          <template #icon><icon-swap /></template>
          域名黑名单
        </a-menu-item>
        <a-menu-item key="system-user">
          <template #icon><icon-paste /></template>
          用户管理
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<style scoped>
.project-desc {
  background-color: white;
  border-bottom: 1px solid rgb(229, 230, 235);
  font-size: 25px;
  text-align: center;
  line-height: 67px;
  font-weight: bold;
  color: cadetblue;
}
.menu {
  box-sizing: border-box;
  background-color: white !important;
  width: 245px;
  height: v-bind('menuHeight');
  border-right: 1px solid rgb(229, 230, 235);
}
</style>
